<template>
	<view class="delivery-ranking">
		<gyd-navbar back-color="#fff" :title="title"></gyd-navbar>

		<nav-bg-cover url="/static/images/bg-cover-ranking.png" :bottom="280">
			<view class="ranking-title">
				<view class="name">排行榜</view>
				<!-- <view class="desc">每天20:00更新</view> -->
			</view>
			<view class="segment-control">
				<view :class="params.type == 1?'segmented-control__item active' : 'segmented-control__item' "
					@click="changeTab(1)">品牌销售排行</view>
				<view :class="params.type == 2?'segmented-control__item active' : 'segmented-control__item' "
					@click="changeTab(2)">店铺排行</view>
			</view>
			<view class="filtrat-time">
				<view :class="params.date == 1 ? 'item active':'item'" @click="changeDate(1)">按周</view>
				<view :class="params.date == 2 ? 'item active':'item'" @click="changeDate(2)">按月</view>
			</view>
		</nav-bg-cover>

		<view class="content">
			<view class="member-card">
				<view class="member-list">
					<view class="member-title">
						<text class="col">排名</text>
						<text class="col">名称</text>
						<text class="col">桶数</text>
					</view>
					<view class="member-item" v-for="(item,index) in list" :key="index">
						<view class="NO">
							<image class="icon" :src="imgHost+'/static/images/icon-NO1.png'" mode="aspectFill"
								v-if="index == 0">
							</image>
							<image class="icon" :src="imgHost+'/static/images/icon-NO2.png'" mode="aspectFill"
								v-else-if="index == 1"></image>
							<image class="icon" :src="imgHost+'/static/images/icon-NO3.png'" mode="aspectFill"
								v-else-if="index == 2"></image>
							<text class="value" v-else>{{ index+1 }}</text>
						</view>
						<view class="user">
							<text class="name">{{item.title}}</text>
						</view>
						<view class="count">
							<text class="value">{{item.order_count}}</text>
							桶
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	import {
		ref,
		reactive,
		toRefs,
		inject,
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		title: '排行版',
		themeColor: cache.get('themeColor'),
		imgHost: util.requestUrl(),
		params: {
			skip: 0,
			type: 1,
			date: 1
		},
		isMore: true,
		list: [],
	});

	//在页面所有元素加载完成后执行（只执行一次）
	onLoad((opt) => {
		console.log('onLoad');
		if (opt.hasOwnProperty('id')) {
			console.log('传递参数', opt.id);
		}
		initData();
	});

	//在页面由不可见变为可见时执行（只要页面显示都会执行）
	onShow(() => {
		console.log('onShow');
	})

	//在页面解析完成之后执行
	onReady(() => {
		console.log('onReady');
	})

	onPullDownRefresh(() => {
		console.log('下拉刷新');
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	})

	onReachBottom(() => {
		console.log('触底加载更多');
	})

	function initData() {
		state.list = [{
			title: '张三',
			order_count: 102,
		}, {
			title: '李四',
			order_count: 100,
		}, {
			title: '王五',
			order_count: 96,
		}, {
			title: '小张',
			order_count: 90,
		}, {
			title: '小李',
			order_count: 74,
		}, {
			title: '小赵',
			order_count: 62,
		}];
	}

	function getList() {
		if (!state.isMore) {
			util.showTip('没有更多了！');
			return;
		}
		state.params.skip = state.list.length;
	}

	function changeTab(type) {
		state.params.type = type;
		state.isMore = true;
		state.list = [];
		getList();
	}

	function changeDate(date) {
		state.params.date = date;
		state.isMore = true;
		state.list = [];
		getList();
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}

	function pageTabRoute(url) {
		uni.reLaunch({
			url
		});
	}

	const {
		title,
		themeColor,
		imgHost,
		params,
		isMore,
		list,
	} = toRefs(state);
</script>

<style lang="scss">
	.delivery-ranking {
		.ranking-title {
			padding: $m24;

			.name {
				font-size: $font-48;
				color: $main-color;
				font-weight: bold;
			}
		}

		.segment-control {
			@include f-center;
			padding: 0 $m12;

			.segmented-control__item {
				@include f-center;
				flex: 1;
				margin: 0 $m12;
				padding: 0.5em;
				color: $main-color;
				border-radius: $radius-8;
				box-sizing: border-box;
				transition: all 0.1s;

				&.active {
					background: linear-gradient(to right, $primary-light-color, $primary-color);
					color: $inverse-color;
				}
			}
		}

		.filtrat-time {
			display: flex;
			justify-content: flex-start;
			padding: $m24 $m24 0;

			.item {
				margin: 0 $m24 0 0;
				padding: 4rpx 16rpx;

				&.active {
					background: #dfebfb;
					border-radius: 4rpx;
					color: $primary-color;
				}
			}
		}

		.content {
			position: relative;
			margin-top: -240rpx;
			padding: 0 $m24 $m24;

			.member-card {
				min-height: 50vh;
				padding: 0 $m24;
				background-color: #fff;
				border-radius: $radius-16;

				.user {
					@include f-between($align: center);
					padding: $m16 0;

					.label {
						width: calc($font-28 * 2);
						color: $tips-color;
					}

					.info {
						@include f-between($align: center);
						flex: 1;
						margin-left: $m24;

						.avatar {
							width: 70rpx;
							height: 70rpx;
							background-color: #F7F7FB;
							border-radius: $radius-circle;
						}

						.name {
							flex: 1;
							margin-left: $m12;
							font-size: $font-30;
							color: $main-color;
							font-weight: 500;
						}

						.NO {
							flex: 1;

							.value {
								color: $primary-color;
								font-size: $font-32;
							}
						}

						.count {
							.value {
								color: $primary-color;
								font-size: $font-32;
							}
						}
					}
				}

				.member-list {
					.member-title {
						display: flex;
						padding: $m24 0;

						.col {
							font-size: $font-24;
							color: $tips-color;

							&:nth-child(1) {
								width: 52rpx;
							}

							&:nth-child(2) {
								flex: 3;
								margin-left: $m24;
							}

							&:nth-child(3) {
								flex: none;
							}
						}
					}

					.member-item {
						@include f-between($align: center);
						border-bottom: 1rpx solid $border-color;

						&:last-child {
							border-bottom: none;
						}

						.NO {
							@include f-center;
							width: 52rpx;
							color: $tips-color;
							box-sizing: border-box;

							.icon {
								width: 52rpx;
								height: 52rpx;
							}
						}

						.user {
							display: flex;
							align-items: center;
							flex: 3;
							margin-left: $m24;

							.name {
								flex: 1;
								margin-left: $m12;
								color: $main-color;
								font-size: $font-30;
								font-weight: 500;
							}

							.avatar {
								width: 70rpx;
								height: 70rpx;
								background-color: #F7F7FB;
								border-radius: $radius-circle;
							}
						}

						.count {
							.value {
								font-size: $font-36;
								color: $primary-color;
								font-weight: 500;
							}
						}
					}
				}
			}
		}
	}
</style>